<!--
 * @Author: wangyu
 * @Date: 2024-12-25 15:04:19
 * @LastEditTime: 2024-12-27 15:58:13
 * @LastEditors: wangyu
 * @Description: 
 * @FilePath: \dzsq-smartpark-platform\src\components\v-chart\index.vue
-->
<template>
  <div class="v-chart" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts";
import * as charts from "./chartOption";
export default {
  name: "v-chart",
  props: {
    option: { type: Object }, //echarts配置
    fast: { type: Object }, //echarts快速配置{type,data},{type,url}
    auto: { type: Boolean, default: true }, //是否监听option变化
  },
  data() {
    return {
      myChart: null,
      autoPlayTooltip: null,
      currentIndex: -1,
      dataLen: 0,
    };
  },
  mounted() {
    this.init();
    this.myChart.on("mouseover", () => {
      clearInterval(this.autoPlayTooltip);
    });
    this.myChart.on("mouseout", () => {
      this.autoPlayTooltip = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.dataLen;
        this.myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: this.currentIndex,
        });
      }, 2000);
    });
  },
  watch: {
    option: {
      handler(n, o) {
        if (n && o && this.auto) this.init();
      },
      deep: true,
    },
  },
  methods: {
    init() {
      this.dataLen = this.option.series[0].data.length;
      this.initChart();
    },
    initChart() {
      if (this.$refs.chart == null) return;
      if (this.myChart == null) {
        this.myChart = echarts.init(this.$refs.chart);
      } else {
        this.myChart.clear();
      }
      let opt = this.parseOpt();
      this.myChart.setOption(opt);
    },
    parseOpt() {
      let opt = {};
      if (this.fast) {
        let type = this.fast.type,
          data = this.fast.data;
        opt = charts[type]({}, data);
      } else if (this.option) {
        opt = this.option;
      }
      return opt;
    },
    resize(w, h) {
      this.myChart && this.myChart.resize({ width: w, height: h });
    },
    autoPlay() {
      this.autoPlayTooltip = setInterval(function () {
        // 显示tooltip
        currentIndex = (currentIndex + 1) % dataLen;
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
      }, 2000);
    },
  },
};
</script>

<style lang="scss" scoped>
.v-chart {
  width: 100%;
  height: 100%;
}
</style>
